<template>
    <div class="cont">
        <van-popup v-model="show" position="bottom" close-on-popstate round @close="close">
            <div class="p-20 content">
                <div class="text-center m-b-10 font-16 text-bold">添加屏蔽词</div>
                <div class="flex align-center p-tb-20 van-hairline--top">
                    <div class="add-left">关键词：</div>
                    <van-field v-model="form.title" label-width="0" placeholder="请输入关键词,例如避孕套、内衣等" />
                </div>
                <div @click="confrim()"
                    class="bottom-btn p-t-10 p-b-10 text-center color-white bg-green" :style="`background:${config.mac_assist_color}`">保存设置</div>
            </div>
        </van-popup>
        
    </div>
</template>

<script>
import { Popup, Field } from 'vant'
export default {
    components: {
        [Popup.name]: Popup,
        [Field.name]: Field
    },
    props: {
        popupVisible: {
            type: Boolean,
            default: false
        },
        isNeed: {
            type: Boolean,
            default: false
        },
        id: {
            type: [Number, String],
            default: 0
        },
        list: {
            type: Array,
            default: () => {
                return []
            }
        },
        keywordData: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data () {
        return {
            show: this.popupVisible,
            config: {},
            form: {
                title: ''
            }

        }
    },
    mounted () {
        this.config = this.$DB.get('robotCfg')
    },
    methods: {
        close () {
            this.$emit('close')
        },
        confrim () {
            if (!this.form.title) {
                return this.$toast('关键词不能为空')
            }
            let obj = {
                type: 'add',
                labelName: this.form.title
            }
            this.$emit('ok', obj)
        }
    }
}
</script>
<style lang="less" scoped>
.add-left{
    flex: 0 0 60px;
}
.bottom-btn {
    border-radius: 100px;
    font-size: 16px;
    text-align: center;
    font-weight: bold;
}
</style>